<!-- 
二维码 分享链接 
-->

<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <div  class="vform-instance-qrcode-dialog">
      <div> {{ formName }}</div>
      <div  class="share-link" @click="handleCopy(shareUrl)">{{ shareUrl }}</div>
      <Qrcode :text="shareUrl" logo="/favicon.ico"/>
      <div>
        <el-button type="primary" @click="handleCopy(shareUrl)">
          <Icon icon="ep:copy-document" />
          <span>复制链接</span>
        </el-button>
      </div>
    </div>
  </Dialog>
</template>
<script setup lang="ts">
import { Qrcode } from '@/components/Qrcode'
// import { useClipboard } from '@vueuse/core' // 非https下不让复制
import useClipboard from "vue-clipboard3";

defineOptions({ name: 'FormConstructForm' })
defineProps({
  formName: {
    type: String,
    default: ''
  }
})

const message = useMessage() // 消息
const { t } = useI18n() // 国际化

const shareUrl = ref("")
const dialogTitle = ref('表单分享链接') // 弹窗的标题

const handleCopy =  async (text) => {
  const { toClipboard } = useClipboard();
  try {
    await toClipboard(text);
    message.success(t('common.copySuccess'))
  } catch (error) {
    message.error(t('common.copyError'))
  }
}


/** 打开弹窗 */
const dialogVisible = ref(false) // 弹窗的是否展示
const open = async (url) => {
  shareUrl.value = url
  dialogVisible.value = true
}


defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>

<style lang="scss" scoped>
.vform-instance-qrcode-dialog {
    text-align: center;

    &>div{
      margin-top: 20px;
    }

    .share-link {
      color: #409eff;
      cursor: pointer;
    }
}
</style>